<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            <span class="demonstration">时间范围:</span>
            <el-date-picker
              v-model="state.value1"
              type="daterange"
              @change="page_check_date"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="row-item">
            状态:<el-select
              @change="getOrderlist"
              v-model="state.bindstore"
              clearable
              placeholder="选择状态"
            >
              <el-option label="新订单" value="10"></el-option>
              <el-option label="已发货" value="20"></el-option>
              <el-option label="已收货" value="30"></el-option>
              <el-option label="已入库" value="40"></el-option>
              <el-option label="已取消" value="99"></el-option>
            </el-select>
          </div>
        </div>
        <el-button size="small" type="primary" @click="new_set_order"
          >新建发货单</el-button
        >
        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            @searchClick="searchClick"
          ></searchDiv>
        </div>
      </div>
      <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="pre_id" label="发货单号"> </el-table-column>
        <el-table-column label="采购清单" width="220">
          <template v-slot="scope">
            <div
              v-for="item in scope.row.item_names"
              class="textElps"
              :key="item"
            >
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货/发货">
          <template v-slot="scope">
            <div v-for="item in scope.row.item_counts" :key="item">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="生产日期"> </el-table-column>
        <el-table-column label="有效期"> </el-table-column>
        <el-table-column align="left" label="采购信息" width="200">
          <template v-slot="scope">
            <div>采购单号:{{ scope.row.procure_pre_id }}</div>
            <div>供应商:{{ scope.row.supplier_name }}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="费用">
          <template v-slot="scope">
            <div>运费:{{ scope.row.trans_fee }}</div>
            <div>其他费用:{{ scope.row.other_fee }}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="收货信息">
          <template v-slot="scope">
            <div>仓库:{{ scope.row.address }}</div>
            <div>收件人:{{ scope.row.liaison }}</div>
            <div>收件电话:{{ scope.row.phone }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="状态信息" width="220">
          <template v-slot="scope">
            <div v-for="item in scope.row.info" :key="item">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="物流" width="180">
          <template v-slot="scope">
            <div>运输方式:{{ scope.row.trans_method }}</div>
            <div>物流单号:{{ scope.row.trans_number }}</div>
            <div>到货日期:{{ scope.row.deliver_eta }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="optionDiv">
              <el-button
                @click.native.prevent="editRow(scope.row)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.can_cancel"
                @click.native.prevent="cancle_order(scope.row)"
                type="text"
                size="small"
              >
                取消
              </el-button>
              <el-button
                v-if="scope.row.can_deliver"
                @click.native.prevent="deliver_order(scope.row)"
                type="text"
                size="small"
              >
                发货
              </el-button>
              <el-button
                v-if="scope.row.can_receive"
                @click.native.prevent="recive_order(scope.row)"
                type="text"
                size="small"
              >
                收货
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Page
        v-if="state.totalPage"
        @changePage="changePage"
        :totalPage="state.totalPage"
      ></Page>
      <!-- 供应商付款申请 -->
      <el-dialog
        title="供应商付款申请"
        v-model="state.new_dialogVisible"
        width="25%"
        center
      >
        <span>
          <el-form
            :model="state.set_form"
            :rules="state.rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="付款金额" prop="last_ware">
              <el-input v-model="state.set_form.ware_name"></el-input>
            </el-form-item>
            <el-form-item label="付款类型" prop="belong_man">
              <el-select
                v-model="state.set_form.belong_man"
                placeholder="请选择付款类型"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="期望时间" prop="relate_log">
              <el-date-picker
                v-model="state.set_form.relate_log"
                placeholder="请选择期望时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="申请备注" prop="relate_log">
              <el-input type="textarea" v-model="state.set_form.relate_log">
              </el-input>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="create_ware()">提 交</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改信息 -->
      <el-dialog
        title="修改"
        width="22%"
        v-model="state.order_dialogVisible"
        center
      >
        <span>
          <el-form
            :model="state.set_form"
            :rules="state.rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="运费" prop="transfee">
              <el-input v-model="state.edit_form.transfee"></el-input>
            </el-form-item>
            <el-form-item label="其他费用" prop="otherFee">
              <el-input v-model="state.edit_form.otherFee"></el-input>
            </el-form-item>
            <el-form-item label="运输方式" prop="trans_type">
              <el-input v-model="state.edit_form.trans_type"></el-input>
            </el-form-item>
            <el-form-item label="物流单号" prop="trans_num">
              <el-input v-model="state.edit_form.trans_num"></el-input>
            </el-form-item>
            <el-form-item label="到货日期" prop="expect_date">
              <el-date-picker
                style="width: 100%"
                v-model="state.edit_form.expect_date"
                placeholder="请选择到货日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.order_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="allow_order()">提 交</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 收货对话框 -->
      <el-dialog
        title="确认收货"
        width="40%"
        v-model="state.recive_dialogVisible"
        center
      >
        <span>
          发货清单
          <el-table :data="state.receiveData" border style="width: 100%">
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="count" label="发货数"> </el-table-column>
            <el-table-column prop="unit_price" label="到货数">
              <template v-slot="scope">
                <el-input
                  type="number"
                  v-model="scope.row.unit_price"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="center" style="padding: 10px 0">
            <el-col :span="6"></el-col>
            <el-col :span="6"
              >到货合计：<span style="color: red">{{ sum_num }}</span>
              箱</el-col
            >
            <el-col :span="6"></el-col>
          </el-row>
          <el-descriptions
            class="margin-top"
            title="带边框列表"
            :column="3"
            :size="size"
            border
          >
            <template #extra> </template>
            <el-descriptions-item>
              <template #label> 发货运费 </template>
              <el-input type="number" v-model="state.send_good_fee"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 其他费用 </template>
              <el-input type="number" v-model="state.other_good_fee"></el-input>
            </el-descriptions-item>
          </el-descriptions>
          备注
          <el-input type="textarea" v-model="state.recieve_note"></el-input>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.recive_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="confirm_recieve()"
              >提 交</el-button
            >
          </span>
        </template>
      </el-dialog>
      <!-- 新建发货单 -->
      <el-drawer
        title="新建发货单"
        v-model="state.set_dialogVisible"
        direction="rtl"
        size="60%"
      >
        <div class="conTxt">
          <div class="navTitle">1、选择采购单</div>
          <el-row>
            <el-col :span="12">
              选择采购ID:<el-select
                v-model="state.set_form.current_id"
                placeholder="请选择"
                @change="change_ware_sel"
              >
                <el-option
                  v-for="item in state.set_form.idArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div class="navTitle">2、采购清单</div>
          <teble> </teble>
          <el-table :data="state.already_table" border style="width: 100%">
            <el-table-column label="商品名称">
              <template v-slot="scope">
                <el-select
                  @change="change_pro_sel(scope.row, $event)"
                  v-model="scope.row.selected"
                >
                  <el-option
                    v-for="item in scope.row.select_arr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="总采购(箱)"> </el-table-column>
            <el-table-column prop="unit_price" label="采购单价">
            </el-table-column>
            <el-table-column prop="residue" label="剩余数量"> </el-table-column>
            <el-table-column label="发货数(箱)">
              <template v-slot="scope">
                <el-input
                  type="numer"
                  v-model="scope.row.send_good_num"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="发货单价(元/箱)">
              <template v-slot="scope">
                <el-input type="numer" v-model="scope.row.purchase"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="150" label="生产日期">
              <template v-slot="scope">
                <el-date-picker style="width:100%" size="small" v-model="scope.row.birth_date"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="有效期(月)">
              <template v-slot="scope">
                <el-input type="number" v-model="scope.row.limit_date"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" @click="del(scope.$index)" size="small"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="space-between">
            <el-col :span="12"> 发货合计: {{ send_total_carton }}箱</el-col>
            <el-col :span="12" style="text-align: right"
              ><el-button type="text" @click="addPro"
                >添加商品</el-button
              ></el-col
            >
          </el-row>
          <div class="navTitle">3、发货信息</div>
          <el-form label-width="70px" :inline="true" class="demo-form-inline">
            <el-row>
              <el-col :span="8">
                <el-form-item label="发货人">
                  <el-input
                    v-model="state.set_form.send_good_man"
                    placeholder="发货人"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话">
                  <el-input
                    placeholder="联系电话"
                    v-model="state.set_form.contact_phone"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="到货时间">
                  <el-date-picker
                    type="date"
                    placeholder="预计到货时间"
                    @change="chooseTimeRange"
                    v-model="state.set_form.exdate_date"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="接货仓库">
                  <el-select
                    placeholder="接货仓库"
                    @change="recieve_ware_change"
                    v-model="state.set_form.recieve_good_ware"
                  >
                    <template
                      v-for="item in state.set_form.recieve_good_arr"
                      :key="item.warehouse_id"
                    >
                      <el-option
                        :label="item.name"
                        :value="item.warehouse_id"
                      ></el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物流方式">
                  <el-input
                    placeholder="物流方式"
                    v-model="state.set_form.log_type"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物流单号">
                  <el-input
                    placeholder="物流单号"
                    v-model="state.set_form.log_num"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="收货人">
                  <el-input
                    placeholder="收货人"
                    v-model="state.set_form.recieve_man"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货电话">
                  <el-input
                    placeholder="收货电话"
                    v-model="state.set_form.recieve_phone"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货运费">
                  <el-input
                    placeholder="发货运费"
                    v-model="state.set_form.send_pro_fee"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="其他费用">
                  <el-input
                    placeholder="其他费用"
                    v-model="state.set_form.send_other_fee"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="navTitle">4、备注</div>
            <el-input type="textarea" v-model="state.set_form.send_note">
            </el-input>
            <el-row> </el-row>
          </el-form>
          <el-row type="flex" justify="center" style="margin-top: 20px">
            <el-col :span="4"><el-button>取消</el-button></el-col>
            <el-col :span="4"
              ><el-button type="primary" @click="onSubmit"
                >创 建</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  computed,
  onMounted,
  watch,
  reactive,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import searchDiv from "@/components/Search.vue";
import Page from "@/components/Pagination.vue";
export default {
    name:"purchase_delivery",
  components: { searchDiv, Page },
  props: {},
  setup() {
    let form = ref("null");

    const double = computed(() => {
      let total_price = 0;
      let storage_total = 0;
      let data = state.good_data;
      // 数量*箱规*价格
      data.forEach((v) => {
        total_price +=
          Number(parseFloat(v.input_residue)) *
          Number(parseFloat(v.carton)) *
          Number(parseFloat(v.input_unit_price));
      });
      storage_total +=
        total_price + Number(state.storage_fee) + Number(state.other_fee);
      return { total_price, storage_total };
    });
    // 收货里的计算属性
    const sum_num = computed(() => {
      let total = 0;
      state.receiveData.filter((v) => {
        total += Number(v.unit_price);
      });
      return total;
    });
    // 新建发货单里的发货总箱数
    const send_total_carton = computed(() => {
      let total = 0;
      state.already_table.filter((v) => {
        total += Number(v.send_good_num);
      });
      return total;
    });
    const { ctx } = getCurrentInstance();
    let state = reactive({
      common_id: "",
      already_table: [], //新建发货单的表格
      set_form: {
        current_id: "",
        idArr: "",
        send_good_total: 0,
        send_good_man: "",
        contact_phone: "",
        exdate_date: "",
        recieve_good_ware: "",
        recieve_good_arr: [],
        log_type: "",
        log_num: "",
        recieve_man: "",
        recieve_phone: "",
        send_pro_fee: "",
        send_other_fee: "",
        send_note: "",
      },
      orderObj: {
        send_order: "",
        orderdataArr: [], //发货单数组
        for_inware: "",
        for_inwareArr: [], //入库仓库
      },
      edit_form: {
        transfee: "",
        otherFee: "",
        trans_type: "",
        trans_num: "",
        expect_date: "",
      },
      recive_dialogVisible: false,
      set_dialogVisible: false,
      total_recive_cartons: 0,
      send_good_fee: 0,
      other_good_fee: 0,
      recieve_note: "",
      storage_fee: 0,
      other_fee: 0,
      storage_note: "",
      new_dialogVisible: false,
      common_id: "",
      num: "",
      waretype: "",
      value1: "",
      begin_date: "",
      end_date: "",
      keywords: "",
      placeholder: "请输入您要搜索的内容",
      searchval: "",
      page: 1,
      totalPage: "",
      noteTxt: "",
      note_dialogVisible: false,
      order_dialogVisible: false,
      bindstore: "",
      good_data: [],
      receiveData: [],
      set_form: {
        last_ware: "",
        ware_name: "",
        belong_man: "",
        relate_log: "",
        contact_man: "",
        contact_phone: "",
        ware_address: "",
      },
      rules: {
        last_ware: [
          { required: true, message: "请选择上级仓库", trigger: "change" },
        ],
        ware_name: [
          { required: true, message: "请填写仓库名称", trigger: "blur" },
        ],
        belong_man: [
          { required: true, message: "请选择所属人", trigger: "change" },
        ],
        relate_log: [
          { required: true, message: "请选择物流商", trigger: "change" },
        ],
        contact_man: [
          { required: true, message: "请填写联系人", trigger: "blur" },
        ],
        contact_phone: [
          { required: true, message: "请填写联系电话", trigger: "blur" },
        ],
        ware_address: [
          { required: true, message: "请填写仓库地址", trigger: "blur" },
        ],
      },
      tableData: [],
    });
    // 搜索事件
    function searchClick(searchCon) {
      state.keywords = searchCon;
      getOrderlist();
    }
    // 确认收货
    function confirm_recieve() {
      let data = state.receiveData;
      let items = [];
      data.forEach((v) => {
        let obj = {
          id: v.id,
          count: v.count,
        };
        items.push(obj);
      });
      ctx.$http
        .post("/tanxiaji/supplier/delivery/receive/", {
          delivery_id: state.common_id,
          transport_fee: state.send_good_fee,
          other_fee: state.other_good_fee,
          note: state.recieve_note,
          items: JSON.stringify(items),
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.recive_dialogVisible = false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑
    function editRow(item) {
      state.common_id = item.id;
      state.edit_form.transfee = "";
      state.edit_form.otherFee = "";
      state.edit_form.trans_type = "";
      state.edit_form.trans_num = "";
      state.edit_form.expect_date = "";
      state.order_dialogVisible = true;
      state.edit_form.transfee = item.trans_fee;
      state.edit_form.otherFee = item.other_fee;
      state.edit_form.trans_type = item.trans_method;
      state.edit_form.trans_num = item.trans_number;
      state.edit_form.expect_date = item.deliver_eta;
    }
    // 更改数量
    function changeResidue(item) {
      let current = item.input_residue;
      let origin_num = item.residue;
      if (current < 1) {
        item.input_residue = 1;
      }
      if (current > origin_num) {
        item.input_residue = item.residue;
      }
    }
    // 移除
    function deleteRow(idx) {
      console.log(idx);
      state.good_data.splice(idx, 1);
    }
    // 修改备注
    function show_note(item) {
      state.note_dialogVisible = true;
      state.common_id = item.row.id;
      state.num = item.row.pre_id;
      if (item.row.note) {
        state.noteTxt = item.row.note;
      } else {
        state.noteTxt = "";
      }
    }
    // 提交新建入库单
    function submitForm() {
      let arr = state.good_data;
      let items = [];
      arr.forEach((v) => {
        let obj = {
          id: v.id,
          count: v.input_residue,
          unit_price: v.input_unit_price,
        };
        items.push(obj);
      });
      let data = {
        receive_id: state.orderObj.send_order || "",
        warehouse_id: state.orderObj.for_inware,
        inbound_fee: state.storage_fee,
        other_fee: state.other_fee,
        note: state.storage_note,
        items: JSON.stringify(items),
        amount: double.value.total_price,
      };
      if (!items.length) return ElNotification.error("请选择商品");

      ctx.$http
        .post("/tanxiaji/supplier/inbound/create/", data)
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.order_dialogVisible = false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 分页
    function changePage(e) {
      state.page = e;
      getOrderlist();
    }
    // 编辑完成
    function allow_order() {
      ctx.$http
        .post("/tanxiaji/supplier/delivery/edit/", {
          deliver_id: state.common_id,
          transport_fee: state.edit_form.transfee,
          other_fee: state.edit_form.otherFee,
          transport_method: state.edit_form.trans_type,
          transport_number: state.edit_form.trans_num,
          deliver_eta: state.edit_form.expect_date,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.order_dialogVisible = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取仓库
    function getWarelist() {
      ctx.$http
        .get("/tanxiaji/erp/depot/ajax/search/", {
          type: 1,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.wareArr = res.data;
            state.orderObj.for_inwareArr = res.data;
            state.set_form.recieve_good_arr = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取新建入库单的仓库列表
    function get_order_ware() {
      ctx.$http
        .post("/tanxiaji/supplier/receive/short/", {})
        .then((res) => {
          if (res.errno == 0) {
            state.orderObj.orderdataArr = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 更改发货单号获取对应的商品
    function change_send_order() {
      let current_order_id = state.orderObj.send_order;
      if (!current_order_id) return;
      let order_items = state.orderObj.orderdataArr.filter(
        (v) => v.id == current_order_id
      )[0].items;
      console.log(order_items);
      order_items.filter((v) => {
        v["input_residue"] = JSON.parse(JSON.stringify(v.residue));
        v["input_unit_price"] = JSON.parse(JSON.stringify(v.unit_price));
      });
      console.log(order_items);
      state.good_data = [...order_items];
    }
    // 关闭弹窗--并清除表单信息
    function new_set_inware() {
      state.new_dialogVisible = true;
      get_order_ware();
      state.orderObj.send_order = "";
      state.orderObj.for_inware = "";
      state.good_data = [];
      state.storage_fee = 0;
      state.other_fee = 0;
      state.storage_note = "";
    }
    // 页面时间范围
    function page_check_date(e){
      if (e != null) {
        state.begin_date = dayjs(e[0]).format("YYYY-MM-DD");
        state.end_date = dayjs(e[1]).format("YYYY-MM-DD");
      } else {
        state.begin_date = "";
        state.end_date = "";
      }
      getOrderlist();
    }
    // 时间范围取值格式化
    function chooseTimeRange(e) {
      if(e!=null){
 state.set_form.exdate_date=dayjs(e).format("YYYY-MM-DD")
      }else{
        state.set_form.exdate_date=""
      }
    }
    function create_ware() {
      form.value.validate((valid) => {
        if (valid) {
          alert("submit!");
          close();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    onMounted(() => {
      getOrderlist();
      getWarelist();
    });
    // 审批
    function approveBtn(item) {
      ElMessageBox.confirm(
        `是否让编号为${item.row.pre_id}的订单通过审核？`,
        "提示",
        {
          confirmButtonText: "通过审核",
          cancelButtonText: "拒绝通过",
          distinguishCancelAndClose: true,
          type: "warning",
          center: true,
        }
      )
        .then((action) => {
          console.log(action);
          approveAjax(item.row.id, 20);
        })
        .catch((action) => {
          console.log(action);
          if (action == "cancel") {
            approveAjax(item.row.id, 10);
          }
        });
    }
    // 审核的接口
    function approveAjax(id, type) {
      ctx.$http
        .post("/tanxiaji/supplier/inbound/verify/", {
          inbound_id: id,
          verify_type: type,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 取消
    function cancle_order(item) {
      ctx.$http
        .post("/tanxiaji/supplier/delivery/cancel/", {
          delivery_id: item.id,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 发货
    function cancle_order(item) {
      ctx.$http
        .post("/tanxiaji/supplier/delivery/deliver/", {
          delivery_id: item.id,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 收货弹窗
    function recive_order(item) {
      state.common_id = item.id;
      ctx.$http
        .post("/tanxiaji/supplier/delivery/detail/", {
          delivery_id: item.id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.recive_dialogVisible = true;
            state.receiveData = res.data.items;
            state.recieve_note = res.data.note;
            state.send_good_fee = res.data.transport_fee;
            state.other_good_fee = res.data.other_fee;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    //获取页面信息
    function getOrderlist() {
      ctx.$http
        .post("/tanxiaji/supplier/delivery/manage/", {
          page: state.page,
          warehouse_id: state.waretype,
          keyword: state.keywords || "",
          status: state.bindstore,
          start_date: state.begin_date,
          end_data: state.end_date,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tableData = res.data.delivers;
            state.totalPage = res.data.pages;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    // 提交备注修改
    function sub_note() {
      ctx.$http
        .post("/tanxiaji/supplier/erp/oreder/note_info/", {
          num: state.num,
          note: state.noteTxt,
          type_no: 4,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.note_dialogVisible = false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 新建发货单
    function new_set_order() {
      state.set_form.current_id="";
      state.already_table=[];
      state.set_dialogVisible = true;
       state.set_form.send_good_man='';  //发货人
       state.set_form.contact_phone=""; //联系电话
       state.set_form.recieve_good_ware="", //接货仓库
       state.set_form.recieve_man="";
       state.set_form.recieve_phone="";
       state.set_form.exdate_date="";
       state.set_form.send_pro_fee="";
       state.set_form.log_type="";
       state.set_form.log_num="";
       state.set_form.send_other_fee="";
      ctx.$http
        .post("/tanxiaji/supplier/procure/short/")
        .then((res) => {
          if (res.errno == 0) {
            let data = res.data;
            data.forEach((v) => {
              v["select_arr"] = [];
              v.items.forEach((item) => {
                let obj = {
                  id: item.id,
                  name: item.name,
                };
                v["select_arr"].push(obj);
              });
            });
            state.set_form.idArr = data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 改变顶部下拉框
    function change_ware_sel() {
      state.already_table = [];
      let id = state.set_form.current_id; //当前顶部仓库勾选的
      get_pro_item(id);
    }
    // 修改商品的下拉
    function change_pro_sel(item, e) {
      console.log("当前项", item, e);
      // console.log("顶部仓库下拉",state.set_form.current_id);
      // console.log("当前商品下拉",e);
      // console.log("菜单里的",state.already_table);
      let top_id = state.set_form.current_id;
      let currnt_m_id = e;

      let origin = state.set_form.idArr;
      // console.log("origin",origin)
      let current_chose = origin
        .filter((v) => v.id == top_id)[0]
        .items.filter((item) => item.id == currnt_m_id);
      // console.log("对应下拉数据",current_chose);
      item.carton = current_chose[0].carton;
      item.count = current_chose[0].count;
      item.id = current_chose[0].id;
      item.purchase = JSON.parse(JSON.stringify(current_chose[0].unit_price));
      item.residue = current_chose[0].residue;
      item.send_good_num = 0;
      console.log("current_chose[0].unit_price", current_chose[0].unit_price);
      item.unit_price = current_chose[0].unit_price;

      // redirect_item(top_id,currnt_m_id);
    }
    // 获取对应的items,并添加到数组里
    function get_pro_item(top_id) {
      let data = state.set_form.idArr; //顶部仓库下拉数组元信息
      let current_pro = data.filter((v) => v.id == top_id)[0]; //默认找出第一个
      let item = current_pro.items[0];
      let obj = {
        selected: item.id,
        id: current_pro.id,
        name: current_pro.name,
        select_arr: current_pro.select_arr,
        carton: item.carton,
        count: item.count,
        residue: item.residue,
        unit_price: item.unit_price,
        send_good_num: 0,
        birth_date:'',
        limit_date:'',
        purchase: JSON.parse(JSON.stringify(item.unit_price)),
      };
      console.log(">>>>>>>>>", obj);
      state.already_table.push(obj);
    }
    // 添加商品
    function addPro() {
      let current_top_id = state.set_form.current_id;
      console.log(current_top_id);
      get_pro_item(current_top_id);
    }
    // 删除商品item
    function del(idx) {
      state.already_table.splice(idx, 1);
    }
    // 切换收货仓库--变更收货人和电话
    function recieve_ware_change(e) {
      let data = state.set_form.recieve_good_arr.filter(
        (v) => v.warehouse_id == e
      )[0];
      state.set_form.recieve_man = data.contacts;
      state.set_form.recieve_phone = data.contacts_phone;
    }
    // 提交新建发货单
    function onSubmit() {
      let data=state.already_table;
       let items=[];
      data.forEach((v)=>{
        let obj={
            id:v.id,
            count:v.send_good_num,
            unit_price:v.purchase,
            birth_date:v.birth_date,
            limit_date:v.limit_date
        }
        items.push(obj);
      })
      let ot = {
        procure_id:state.set_form.current_id, //采购单id
        liaison: state.set_form.send_good_man,  //发货人
        phone:state.set_form.contact_phone, //联系电话
        address:state.set_form.recieve_good_ware, //接货仓库
        receiver: state.set_form.recieve_man,
        receiver_phone: state.set_form.recieve_phone,
        deliver_eta: state.set_form.exdate_date,
        transport_fee: state.set_form.send_pro_fee,
        transport_method: state.set_form.log_type,
        transport_number: state.set_form.log_num,
        other_fee: state.set_form.send_other_fee,
        amount: "",
        note: state.set_form.send_note,
        items:JSON.stringify(items)
      };
      // console.log(ot);
      ctx.$http
        .post("/tanxiaji/supplier/delivery/create/",ot)
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.set_dialogVisible=false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    return {
      page_check_date,
      onSubmit,
      recieve_ware_change,
      del,
      send_total_carton,
      change_ware_sel,
      new_set_order,
      sum_num,
      editRow,
      sub_note,
      approveBtn,
      searchClick,
      form,
      state,
      new_set_inware,
      close,
      create_ware,
      allow_order,
      chooseTimeRange,
      getWarelist,
      getOrderlist,
      changePage,
      show_note,
      change_send_order,
      double,
      changeResidue,
      deleteRow,
      submitForm,
      cancle_order,
      recive_order,
      confirm_recieve,
      change_pro_sel,
      addPro,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
  }
  .conTxt {
    padding: 0 20px;
  }
}
</style>